<template>
    <div class="body_box">
        <!-- app-container -->
        <div class="head">
            <el-form :model="queryParams" ref="queryForm" :inline="true">
                <el-form-item label="查询：" prop="keyword">
                    <el-input style="width: 370px;" v-model="queryParams.keyword" placeholder="请输入交易单号、交易流水、结算单号、交易手机号"
                        clearable />
                </el-form-item>
                <el-form-item label="交易来源：" prop="orderSource">
                    <el-select v-model="queryParams.orderSource" filterable placeholder="请选择" clearable
                        style="width: 180px">
                        <el-option v-for="dict in orderSourceList" :key="dict.id" :label="dict.value" :value="dict.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="交易类型：" prop="transactionType">
                    <el-select v-model="queryParams.transactionType" placeholder="请选择" clearable style="width: 190px">
                        <el-option v-for="dict in transactionTypeList" :key="dict.id" :label="dict.value"
                            :value="dict.id" />
                    </el-select>
                </el-form-item>

                <el-form-item label="结算状态：" prop="settlementStatus">
                    <el-select v-model="queryParams.settlementStatus" placeholder="请选择" filterable clearable
                        style="width: 180px">
                        <el-option v-for="dict in settlementStatusList" :key="dict.id" :label="dict.value"
                            :value="dict.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="收款账户：" prop="receiptAccount">
                    <el-select v-model="queryParams.receiptAccount" placeholder="请选择" filterable clearable
                        style="width: 180px">
                        <el-option v-for="dict in receiptAccountList" :key="dict.id" :label="dict.name" :value="dict.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="核销店铺：" prop="verificationIdList">
                    <el-select v-model="verificationIdList" placeholder="请选择" filterable clearable multiple
                        style="width: 180px">
                        <el-option v-for="dict in shopDataListHx" :key="dict.id" :label="dict.value" :value="dict.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="结算店铺：" prop="settlementIdList">
                    <el-select v-model="settlementIdList" placeholder="请选择" filterable clearable multiple
                        style="width: 180px">
                        <el-option v-for="dict in shopDataListJs" :key="dict.id" :label="dict.value" :value="dict.id" />
                    </el-select>
                </el-form-item>

                <el-form-item label="发行店铺：" prop="distributionIdList">
                    <el-select v-model="distributionIdList" placeholder="请选择" filterable clearable multiple
                        style="width: 180px">
                        <el-option v-for="dict in shopDataListFx" :key="dict.id" :label="dict.value" :value="dict.id" />
                    </el-select>
                </el-form-item>

                <el-form-item prop="timeSatus">
                    <el-dropdown split-button style="margin-right:10px;" @command="handCommand">
                        <div>
                            <p v-if="timeSatus == 1">结算时间</p>
                            <p v-else-if="timeSatus == 2">交易时间</p>
                            <p v-else-if="timeSatus == 3">核销时间</p>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="1">结算时间</el-dropdown-item>
                            <el-dropdown-item :command="2">交易时间</el-dropdown-item>
                            <el-dropdown-item :command="3">核销时间</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="listBox">
            <div class="main_top">
                <div class="lef"></div>
                <div class="listBox_head">
                    <export-excel-button title="交易明细列表" action="/shenye/fund/trade/bill/detail/export" :params="ExportParams" />
                </div>
            </div>
            <el-table ref="table" v-loading="loading" :data="tabList" stripe border>
                <el-table-column label="序号" align="center" type="index" width="64px" />
                <el-table-column label="交易单号" align="center" prop="orderNo" :show-overflow-tooltip="true" width="220" />
                <el-table-column label="交易流水号" align="center" prop="thirdPartyNo" :show-overflow-tooltip="true"
                    width="250" />
                <el-table-column label="结算状态" align="center" prop="settlementStatus" :show-overflow-tooltip="true" />
                <el-table-column label="交易手机号" align="center" prop="phone" :show-overflow-tooltip="true" width="120" />

                <el-table-column label="发行店铺" align="center" prop="distributionShopName" :show-overflow-tooltip="true" width="120" />

                <el-table-column label="交易来源" align="center" prop="orderSource" :show-overflow-tooltip="true" width="100"/>
                <el-table-column label="交易类型" align="center" prop="transactionTypeStr" :show-overflow-tooltip="true" />
                <el-table-column label="交易时间" align="center" prop="transactionTime" :show-overflow-tooltip="true" width="170" />

                <el-table-column label="售价" align="center" prop="price" :show-overflow-tooltip="true" width="120" />

                <el-table-column label="交易金额" align="center" prop="orderMoney" :show-overflow-tooltip="true" />
                <el-table-column label="积分抵扣" align="center" prop="integralAmount" :show-overflow-tooltip="true" />
                <el-table-column label="平台补贴" align="center" prop="platformSubsidy" :show-overflow-tooltip="true" width="120">
                    <template slot-scope="{}" slot="header">
                        <span>平台补贴</span>
                        <el-tooltip class="item" effect="dark" placement="top">
                        <i class="el-icon-question tip_icon"></i>
                        <div slot="content">
                            <p>平台补贴=商户收入-（实际支付金额-服务费+积分抵扣金额）</p>
                        </div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="实付金额" align="center" prop="payMoney" :show-overflow-tooltip="true" />
                <el-table-column label="服务费(￥)" align="center" prop="serviceFee" :show-overflow-tooltip="true" width="120">
                    <template slot-scope="{}" slot="header">
                        <span>服务费(￥)</span>
                        <el-tooltip class="item" effect="dark" placement="top">
                        <i class="el-icon-question tip_icon"></i>
                        <div slot="content">
                            <p>服务费=售价*费率（当补贴活动为商户补贴时，服务费为0）</p>
                        </div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="费率(%)" align="center" prop="serviceRatio" :show-overflow-tooltip="true" />
                <el-table-column label="支付手续费(￥)" align="center" prop="payFee" :show-overflow-tooltip="true" width="150">
                    <template slot-scope="{}" slot="header">
                        <span>支付手续费(￥)</span>
                        <el-tooltip class="item" effect="dark" placement="top">
                        <i class="el-icon-question tip_icon"></i>
                        <div slot="content">
                            <p>支付手续费=实付金额*0.54%</p>
                        </div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="平台收入(￥)" align="center" prop="platformIncome" :show-overflow-tooltip="true" width="120">
                    <template slot-scope="{}" slot="header">
                        <span>平台收入(￥)</span>
                        <el-tooltip class="item" effect="dark" placement="top">
                        <i class="el-icon-question tip_icon"></i>
                        <div slot="content">
                            <p>平台收入=服务费-支付手续费-椰分抵扣金额-平台补贴；（当补贴活动为商户补贴时，平台收入=实付金额-支付手续费）</p>
                        </div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="商户收入(￥)" align="center" prop="merchantIncome" :show-overflow-tooltip="true" width="120">
                    <template slot-scope="{}" slot="header">
                        <span>商户收入(￥)</span>
                        <el-tooltip class="item" effect="dark" placement="top">
                        <i class="el-icon-question tip_icon"></i>
                        <div slot="content">
                            <p>商户收入=售价-服务费（当补贴活动为商户补贴时，商户收入为0</p>
                        </div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="核销店铺" align="center" prop="verificationShopName" :show-overflow-tooltip="true" width="130"/>
                <el-table-column label="核销时间" align="center" prop="verificationTime" :show-overflow-tooltip="true"
                    width="170" />
                <el-table-column label="结算店铺" align="center" prop="settlementShopName" :show-overflow-tooltip="true" width="130"/>
                <el-table-column label="结算单号" align="center" prop="settlementNo" :show-overflow-tooltip="true"
                    width="220" />
                <el-table-column label="结算时间" align="center" prop="settlementTime" :show-overflow-tooltip="true"
                    width="170" />
                <el-table-column label="邀请人" align="center" prop="referrer" :show-overflow-tooltip="true" />
                <el-table-column label="奖励CoCo" align="center" prop="awardCocoAmount" :show-overflow-tooltip="true"
                    width="100" />
                <el-table-column label="奖励椰分" align="center" prop="awardYfAmount" :show-overflow-tooltip="true" />
                <el-table-column label="收款账户" align="center" prop="receiptAccount" :show-overflow-tooltip="true" width="180"/>
                <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" width="180"/>
            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList"></pagination>
        </div>
    </div>
</template>
<script>
import {
    shenyeFundTradeBillDetailList,
    receiptAccountList,
    shopSelect
} from "@/api/syFundManagement/summaryOfDetails";
import ExportExcelButton from "@/components/ExportExcelButton/index";
export default {
    name: "summaryOfDetails",
    components: {
        ExportExcelButton,
    },
    data() {
        return {
            loading: false,
            total: 0,//状态字典数组
            orderSourceList: [],//交易来源列表
            transactionTypeList: [],//交易类型列表
            settlementStatusList: [],//结算状态列表
            receiptAccountList: [],//收款账户列表
            shopDataListHx: [],//核销店铺列表
            shopDataListJs: [],//结算店铺列表
            shopDataListFx: [],//发行店铺列表
            verificationIdList: [],
            settlementIdList: [],
            distributionIdList: [],
            
            //表格数据
            tabList: [],
            date: [],
            timeSatus: 1, //选择结算时间、交易时间、核销时间
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                query: '', //卡查询
                orderSource: '', //交易来源
                transactionType: '', //交易类型
                settlementStatus: '', //结算状态
                receiptAccount: '', //收款账户
                verificationIds: '', //核销店铺
                settlementIds: '', //结算店铺
                distributionIds:'',//发行店铺
            },

        }
    },
    computed: {
        ExportParams() {
            const params = {
                ...this.queryParams,
            };
            if (this.date.length > 0) {
                if (this.timeSatus == 1) {
                    params.settlementStartTime = this.date[0]
                    params.settlementEndTime = this.date[1]
                } else if (this.timeSatus == 2) {
                    params.transactionStartTime = this.date[0]
                    params.transactionEndTime = this.date[1]
                } else if (this.timeSatus == 3) {
                    params.verificationStartTime = this.date[0]
                    params.verificationEndTime = this.date[1]
                }
            }
            return params;
        },
    },
    created() {
        if (this.$route.query.settleNo) {
            this.queryParams.keyword = this.$route.query.settleNo;
        }
        this.getStatusList()
        this.getShopSelect()
        this.getReceiptAccountList()
        this.getList()
    },
    methods: {
        //核销店铺、结算店铺列表
        getShopSelect() {
            var data = {
                type: 2
            }
            shopSelect(data).then(res => {
                var arr = [];
                this.shopDataListHx = arr.concat(res.result)
                this.shopDataListJs = arr.concat(res.result)
                this.shopDataListFx = arr.concat(res.result)
            })
        },
        //收款账户
        getReceiptAccountList() {
            receiptAccountList().then(res => {
                var arr = [
                    { id: "", name: "全部" }
                ];
                this.receiptAccountList = arr.concat(res.result)
            })
        },
        // 选择结算时间、交易时间、核销时间事件
        handCommand(command) {
            this.timeSatus = command
        },
        // 获取活动状态字典
        getStatusList() {
            var dictType = "customer_equity_card_order_source,shenye_merchant_order_transaction_type,merchant_equity_card_settle_status";
            this.$getSelectList(dictType)
                .then((res) => {
                    var arr = [{ id: "",value: "全部"}];
                    this.orderSourceList = arr.concat(res.result[0].dictList)
                    this.transactionTypeList = arr.concat(res.result[1].dictList)
                    this.settlementStatusList = arr.concat(res.result[2].dictList)
                })
                .finally(() => { });
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            let data = JSON.parse(JSON.stringify(this.queryParams));  //深拷贝
            if (this.date.length > 0) {
                if (this.timeSatus == 1) {
                    data.settlementStartTime = this.date[0]
                    data.settlementEndTime = this.date[1]
                } else if (this.timeSatus == 2) {
                    data.transactionStartTime = this.date[0]
                    data.transactionEndTime = this.date[1]
                } else if (this.timeSatus == 3) {
                    data.verificationStartTime = this.date[0]
                    data.verificationEndTime = this.date[1]
                }
            }
            shenyeFundTradeBillDetailList(data).then((response) => {
                response.result.records.forEach(item => {
                    for (var key in item) {
                        if (item[key] === '') {
                            item[key] = "-";
                        }
                    }
                });
                this.tabList = response.result.records;
                this.total = response.result.total;
                this.loading = false;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            //创建确定
            this.queryParams.pageNum = 1;
            if(this.verificationIdList.length > 0){
                this.queryParams.verificationIds = this.verificationIdList.toString()
            }else{
                this.queryParams.verificationIds = ''
            }
            if(this.settlementIdList.length > 0){
                this.queryParams.settlementIds = this.settlementIdList.toString()
            }else{
                this.queryParams.settlementIds = ''
            }
            if(this.distributionIdList.length > 0){
                this.queryParams.distributionIds = this.distributionIdList.toString()
            }else{
                this.queryParams.distributionIds = ''
            }
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                keyword: '', //卡查询
                orderSource: '', //交易来源
                transactionType: '', //交易类型
                settlementStatus: '', //结算状态
                receiptAccount: '', //收款账户
                verificationIds: '', //核销店铺
                settlementIds: '', //结算店铺
                distributionIds:'',//发行店铺
            };
            this.timeSatus = 1
            this.date = []
            this.verificationIdList = []
            this.settlementIdList = []
            this.distributionList = []
            this.getList();
        },
    },
};

</script>
<style scoped scoped lang="scss">
::v-deep .el-table .DisableSelection .cell .el-checkbox__inner {
    display: none;
}

.body_box {
    padding: 20px;
}

.head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
}

.listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
}

.listBox_head {
    padding: 0 0 10px 0;
}

.el-dropdown {
    margin-left: 10px;
}

.main_top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 14px;
    color: #333;
    background: #fff;
    border-radius: 6px;
    margin-bottom: 10px;
}
.tip_icon{
    font-size: 14px;
    margin-left: 2px;
    cursor: pointer;
}
</style>
